<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:share
     -->
    <div class="QS-content-template QS-share">
        <div class="share_box">
            <div v-for="(item,index) in shareList" :key="index" class="share_label">
                <el-tooltip 
                    class="item" 
                    effect="dark" 
                    :content="item.txt" 
                    placement="top-start"
                >
                    <el-button class="share_label_p">{{item.txt}}</el-button>
                </el-tooltip>
                <el-image 
                    class="share_image"
                    :src="item.url" 
                    :preview-src-list="item.srcList">
                </el-image>
                <div class="share_cansole">
                    <el-popconfirm
                        confirmButtonText='确认'
                        cancelButtonText='取消'
                        icon="el-icon-info"
                        iconColor="red"
                        title="确认删除这一分享设置？"
                        @onConfirm="delConfirm(item)"
                    >
                        <el-button class="share_btn" slot="reference">
                            <i @click="delItem(item)" class="el-icon-delete"></i>
                        </el-button>
                    </el-popconfirm>

                    <el-button @click="showDialog" class="share_btn" slot="reference">
                        <i @click="addItem" class="el-icon-circle-plus-outline"></i>
                    </el-button>
                </div>
            </div>
        </div>


        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="70%"
        >
            <div class="share_dialog">
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">描述文字</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="shareDes"
                            placeholder="请输入描述文字"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">展示图片</span>
                    <div class="makeFoods_input">
                        <el-upload
                            class="avatar-uploader uploader_small"
                            :action="$commonFunc.imageAPI()"
                            :show-file-list="false"
                            :on-success="addShareSuccess"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="addUrl" :src="addUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
		return {
            shareList:[],//分享页展示列表
            dialogVisible:false,//dialog flag
            shareDes:'',//添加 - 描述文字
            addUrl:'',//添加 - 展示图片
		}
    },
    mounted(){
        for(var i = 0;i < 10;i ++){
            this.shareList.push({
                txt:'分享配置文字分享配置文字分享配置文字',//分享页文字描述
                url:require('../assets/image/image01.jpg'),//分享页图片展示
                srcList:[require('../assets/image/image01.jpg')],//分享页图片预览功能数组 - 可多图片
            });
        }
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        delItem(item){//点击删除标签

        },
        addItem(){//添加标签

        },
        delConfirm(item){//删除确认按钮
            console.log(item)
        },
        showDialog(){//打开dialog
            this.dialogVisible = true;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        addShareSuccess(res, file) {
            this.addUrl = URL.createObjectURL(file.raw);
        },
        addConfirm(){//添加确认按钮
            this.dialogVisible = false;//关闭dialog
            // this.shareDes//描述文字
            // this.addUrl//展示图片
        },
    }
}
</script>